<template>
<div class="save-folder" v-if="hasData">
  <div class="left">
    <el-menu
        :default-active="saveFolderList[0].folderId.toString()"
        class="el-menu-vertical-demo"

    >
      <el-sub-menu index="0">
        <template #title>
          <span>我创建的收藏夹</span>
        </template>
        <el-menu-item v-for="(item,index) in saveFolderList"
                      @click="getThis(item.folderId,index)"
                      :index="item.folderId.toString()" :key="item.foldId" style="display: flex;justify-content: space-between">
            <span class="name-text">{{ item.saveName }}</span>
            {{item.recordCount}}
        </el-menu-item>

      </el-sub-menu>
    </el-menu>
  </div>
  <div class="right">
    <div class="header">
      <div class="header-left">
        <div class="video-pic">
          <el-image :src="currentFolder.saveCover" fit="cover" width="180" hei alt=""></el-image>
        </div>
      </div>
      <div class="header-center">
        <h3>{{ currentFolder.saveName }}</h3>
        <div class="meta-info">
          {{ currentFolder.permission === 1? "公开":"私密" }}&nbsp;&nbsp;视频数：{{ currentFolder.recordCount }}&nbsp;
<!--          播放量：15-->
        </div>
<!--        <div class="operation">-->
<!--          <el-button type="primary">播放全部</el-button>-->
<!--          <el-button>点赞</el-button>-->
<!--          <el-button>转发</el-button>-->
<!--        </div>-->
      </div>
      <div class="header-right">
        <el-button>批量操作</el-button>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="content-box">
      <div class="top">
        <div class="filter">
          <el-button :type="curHighLight ===1 ? 'primary':''" @click="getLatestSave()">最近收藏</el-button>
          <el-button :type="curHighLight ===2 ? 'primary':''" @click="getMostPlay()">最多播放</el-button>
          <el-button :type="curHighLight ===3 ? 'primary':''" @click="getLatestPublish()">最近投稿</el-button>
        </div>
        <div class="search">
          <el-input></el-input>
          <el-icon><Search /></el-icon>
        </div>
      </div>
      <div class="concrete-video-list">
        <five-col-video-list :data-list="saveRecordList" :is-save="true"></five-col-video-list>
      </div>
    </div>
  </div>
</div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import FiveColVideoList from "@/components/FiveColVideoList.vue";
import {getSaveFolder, querySaveList} from "@/api/api.js";
import {useUserStore} from "@/stores/userInfoStore.js";
import {useRoute} from "vue-router";

let userId = {}
const route = useRoute();
onMounted(async ()=>{
  console.log(route)
  if(route.params.userId){
    userId = route.params.userId
  }else{
    userId = useUserStore().userInfo.userId;
  }

  if(!userId){
    userId = localStorage.getItem("userId")
  }
  // 获取目录列表
  await getSaveFolderList();
  if(saveFolderList.value.length === 0){
    return;
  }
  queryParams.folderId = saveFolderList.value[0].folderId
  currentFolder.value = saveFolderList.value[0]
  const res = await querySaveList(queryParams);
  saveRecordList.value = res.data.records
})
/* 左侧收藏夹列表相关 */
const saveFolderList = ref([
  {
    folderId:1,
    saveName:"默认收藏夹",
    recordCount:100
  },
  {
    folderId:2,
    saveName:"人生",
    recordCount:100
  },
])

const params = {
  page:1,
  pageSize:10,
}
const hasData = ref(false)
const getSaveFolderList = async () => {
  console.log("开始获取收藏夹列表，用户id为："+userId)
  // 请求收藏夹列表
  const res = await getSaveFolder(userId);
  saveFolderList.value = res.data.records;
  console.log(saveFolderList.value)
  console.log(saveFolderList.value.length)
  if(saveFolderList.value.length === 0){
    hasData.value = false
    return;
  }
  hasData.value = true
  console.log(saveFolderList.value)
  console.log(saveFolderList.value[0].folderId)
  currentFolder.value = saveFolderList.value[0];

}
/* 左侧收藏夹列表相关结束 */



/* 当前收藏夹 */
const currentFolder = ref({})
/* 当前收藏夹结束 */

const getLatestSave = async () => {
  queryParams.sortBy = 1;
  curHighLight.value = 1
  await fetchData();
}
const getMostPlay = async () => {
  queryParams.sortBy = 2;
  curHighLight.value = 2
  await fetchData();
}
const getLatestPublish = async () => {
  queryParams.sortBy = 3;
  curHighLight.value = 3
  await fetchData();
}

const curHighLight = ref(1)

/* 收藏记录相关 */
const saveRecordList = ref([])
// 参数
const queryParams = {
  sortBy:1,
  folderId:0,
  page:1,
  pageSize:15,
}
function getData(id){
  queryParams.folderId = id
}
// currentFolderId
const getThis = async (id,index) => {
  console.log(id)
  queryParams.folderId = id;
  currentFolder.value = saveFolderList.value[index]
  console.log(currentFolder.value)
  await fetchData();
}

const fetchData = async () => {
  const res = await querySaveList(queryParams);
  console.log(res)
  saveRecordList.value = res.data.records;
  saveRecordList.value.forEach(item=>{
    console.log(typeof item.createTime)
    console.log(item.createTime)
    item.saveTime = handleTime(item.createTime);
  })
  console.log(saveRecordList.value)
}

function handleTime(time){
  const date = new Date(time);
  const curDate = new Date();
  let d_ms = curDate - date;
  if(d_ms < 1000*60*60*24*1){
    if(d_ms < 1000*60*60){
      if(d_ms < 1000*60){
        return ~~(d_ms / 1000) + "秒前"
      }
      return ~~(d_ms / (1000*60)) + "分钟前"
    }
    return ~~(d_ms / (1000*60*60)) + "小时前"
  }else if(d_ms < 1000*60*60*24*2){
    return "昨天"
  }
  else{
    return `${date.getMonth()+1}-${date.getDate()}`;
  }
}
/* 收藏记录相关结束 */

</script>
<style scoped lang="scss">
.el-icon{
  top: -25px;
  left: 190px;
}
.save-folder{
  display: flex;
  .left{
    width: 190px;
    height: 300px;
    //background-color: red;
    .item-box{
      width: 150px;
      display: flex;
      justify-content: space-between;
      color: gray;
      font-size: 13px;
      .name-text{
        color: black;
        font-size: 14px;
      }
    }
  }
  .right{
    box-sizing: border-box;
    .header{
      display: flex;
      .header-left{
        width: 180px;
        height: 100px;
        margin: 0 20px;
        .video-pic{
          border-radius: 10px;
          overflow: hidden;
          height: 110px;
        }
      }
      .header-center{
        width: 850px;
        //background-color: #8494ff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .meta-info{
          color: gray;
          font-size: 13px;
        }
      }
      .header-right{
        width: 100px;
        height: 100px;
        //background-color: blue;
        padding-top: 68px;
      }
    }
    .content-box{
      padding: 20px;
      .top{
        display: flex;
        justify-content: space-between;
        .filter{
          .search{
            position: relative;

          }
        }
      }
      .concrete-video-list{

      }
    }
  }
}

</style>